import { jsx as _jsx } from "react/jsx-runtime";
import React, { useRef } from "react";
import { sales } from "./TestData1";
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import PivotGrid from "devextreme-react/pivot-grid";
const currencyFormatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
});
const customizeTooltip = (args) => {
    const valueText = currencyFormatter.format(args.originalValue);
    return {
        html: `${args.seriesName} | Total<div class="currency">${valueText}</div>`,
    };
};
const dataSource1 = new PivotGridDataSource({
    fields: [
        {
            caption: "Region",
            width: 120,
            dataField: "region",
            area: "row",
            sortBySummaryField: "Total",
        },
        {
            caption: "City",
            dataField: "city",
            width: 150,
            area: "row",
        },
        {
            dataField: "date",
            dataType: "date",
            area: "column",
        },
        {
            groupName: "date",
            groupInterval: "month",
            visible: false,
        },
        {
            caption: "Total",
            dataField: "amount",
            dataType: "number",
            summaryType: "sum",
            format: "currency",
            area: "data",
        },
    ],
    store: sales,
});
console.log(sales);
const dataSource = new PivotGridDataSource({
    fields: [
        {
            caption: "ID",
            dataField: "productID",
            area: "row",
            sortOrder: "desc",
            width: 100,
            expanded: true,
            allowExpandAll: false,
            allowFiltering: true,
        },
        {
            caption: "项目编号",
            dataField: "productCode",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            width: 100,
        },
        {
            caption: "项目名称",
            dataField: "productName",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            width: 150,
        },
        {
            caption: "项目描述",
            dataField: "productDesc",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            width: 150,
        },
        {
            caption: "项目关联码",
            dataField: "baseUnitCode",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            // width: 150,
        },
        {
            caption: "WHID",
            dataField: "WHID",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            // width: 150,
        },
        {
            caption: "WHCode",
            dataField: "WHCode",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            width: 150,
        },
        {
            caption: "WHName",
            dataField: "WHName",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            width: 150,
        },
        {
            caption: "WHID",
            dataField: "WHID",
            area: "row",
            sortOrder: "desc",
            expanded: true,
            width: 150,
        },
        {
            caption: "年份",
            dataField: "year",
            area: "column",
            sortOrder: "desc",
            expanded: true,
        },
        {
            caption: "数量",
            dataField: "Qty",
            width: 150,
            area: "data",
            summaryType: "sum",
            expanded: true,
        },
        {
            caption: "金额",
            dataField: "Cost",
            width: 150,
            area: "data",
            summaryType: "sum",
            expanded: true,
        },
    ],
    // retrieveFields:false,
    store: sales,
});
// https://js.devexpress.com/React/Documentation/21_1/Guide/UI_Components/PivotGrid/Visual_Elements/
const FIELD_PANEL_CONFIG = {
    showColumnFields: false,
    showRowFields: true,
    showDataFields: false,
    showFilterFields: false,
    visible: true,
    allowFieldDragging: false, //是否允许列调整顺序
};
const CpasPivotGrid = React.forwardRef((props, ref) => {
    const chartRef = useRef(null);
    const pivotGridRef = useRef(null);
    // useEffect(() => {
    //   const pivotInstance = pivotGridRef.current.instance;
    //   const chartInstance = chartRef.current.instance;
    //   pivotInstance.bindChart(chartInstance, {
    //     dataFieldsDisplayMode: "splitPanes",
    //     alternateDataFields: false,
    //   });
    //   setTimeout(() => {
    //     dataSource.expandHeaderItem("row", ["North America"]);
    //     dataSource.expandHeaderItem("column", [2013]);
    //   });
    // }, []);
    console.log(sales.length);
    const onCellPrePared = function (e) {
        const pivotgrid = e.component;
        debugger;
        const cell = e.cellElement;
        // e.cell.expanded = undefined;
        // 使用 querySelector 选择特定 class 的子元素并将其删除
        var childElement = cell.querySelector(".dx-expand-icon-container");
        if (childElement) {
            // 如果找到符合条件的子元素，则删除该子元素
            // cell.removeChild(childElement);
        }
        // e.cellElement.classList.remove("dx-pivotgrid-collapsed");
    };
    return (_jsx(React.Fragment, { children: _jsx("div", { style: { width: "100%", height: 500, backgroundColor: "red" }, children: _jsx(PivotGrid, { id: "pivotgrid", dataSource: dataSource, allowSortingBySummary: true, allowFiltering: true, allowSorting: true, fieldChooser: {
                    enabled: true,
                }, height: "100%", scrolling: {
                    mode: "virtual",
                    useNative: true,
                }, rowHeaderLayout: "standard", showBorders: true, allowExpandAll: false, 
                // wordWrapEnabled={false} //文本按照文本的最大内容设置列宽，如果不设置这个会折行，折行会导致和复合表头的线无法对其
                fieldPanel: FIELD_PANEL_CONFIG, headerFilter: {
                    allowSearch: true,
                }, showColumnTotals: false, showColumnGrandTotals: false, onCellPrepared: onCellPrePared, showRowTotals: false, showRowGrandTotals: false, ref: pivotGridRef }) }) }));
});
export default CpasPivotGrid;
